/* eslint-disable no-unused-vars */
import { Table } from 'reactstrap'
import { useSkin } from '@src/utility/hooks/useSkin'
import classNames from 'classnames'
import moment from 'moment'

const TableBordered = ({ tableHeaderData, DetailData }) => {
  // skin hook
  const { skin } = useSkin()
  
  const handleTimeDiff = (startTimes, endTimes) => {
    // start time and end time
    const startTime = moment(startTimes, 'HH:mm a')
    const endTime = moment(endTimes, 'HH:mm a')

    const hrs = moment.utc(endTime.diff(startTime)).format('H')

    return hrs
  }

  return (
    <Table bordered responsive className='appointment-table'>
      <thead>
        <tr className='table-header'>
          {tableHeaderData.map(({ header }, i) => (
            <th
              className={classNames({
                bgyellowish: skin === 'light',
                ' appointmentHeader': true
              })}
              key={i}
            >
              {header}
            </th>
          ))}
        </tr>
      </thead>
      <tbody
        className={classNames({
          cardBodybgColor: skin === 'light'
        })}
      >
        {DetailData.map((item, i) => (
          <tr key={i} className='appointment-tr'>
            <td style={{ fontWeight: 'bold' }}>{moment(item.date).format('MM/DD/YYYY')}</td>
            <td>
              {item.startTime} - {item.endTime}
            </td>
            <td>{item.location.join(', ')}</td>
            <td>
              {handleTimeDiff(item.startTime, item.endTime)}
              hours
            </td>
          </tr>
        ))}
      </tbody>
    </Table>
  )
}

export default TableBordered
